import Phaser from 'phaser'
import { AlignGrid } from '../classes/util/alignGrid'
import { Align } from '../classes/util/align'
import { FlatButton } from '../classes/ui/flatButton'
import { Controller } from '../classes/mc/controller'

export class SceneTitle extends Phaser.Scene {
  constructor () {
    super('SceneTitle')
  }

  preload () {
    this.load.image('title', './title1.png')
    this.load.image('button1', require('../../assets/img/ui/buttons/2/1.png'))
  }

  create () {
    window._that.$emitter = new Phaser.Events.EventEmitter()
    window._that.$controller = new Controller()

    window._that.$alignGrid = new AlignGrid({ rows: 11, cols: 11, scene: this })
    // window._that.$alignGrid.showNumbers()

    const title = this.add.image(0, 0, 'title')
    Align.scaleToGameW(title, 0.8)
    window._that.$alignGrid.placeAtIndex(38, title)

    const btnStart = new FlatButton({ scene: this, key: 'button1', text: 'start', events: 'start_game' })
    window._that.$alignGrid.placeAtIndex(93, btnStart)

    window._that.$emitter.on('start_game', this.startGame, this)
  }

  startGame () {
    this.scene.start('SceneMain')
  }

  update (time, delta) {
    super.update(time, delta)
  }
}
